<template>
  <div class="header">
    <i class="iconfont icon-icon-" @click="onClickLeft" v-show="isBack"></i>
    <span class="warehouse" :class="[isBack ? 'a' : 'b']">{{changeWarehouse}}</span>
    {{title}}
    <!-- <i class="iconfont icon-location" @click="onClickRight" v-show="isRightClick"></i> -->
    <div class="userinfo">
      <i class="iconfont name">{{name}}</i>
      <i class="iconfont icon-ren" @click="onClickRight" :class="{working:working,pause:pause}"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      isBack: true,
      isRight: false,
      name: '',
      status: '',
      working: false,
      pause: false
    }
  },
  methods: {
    onClickLeft() {
      if(this.backHome && this.backHome == true){
        this.$router.push({name:'home'});
      }else{
        this.$router.go(-1)
      }
    },
    onClickRight() {
      this.$router.push({ path: this.rightLink });
    },
    changeRen() {
      if(this.$store.state.status == 'IDLE'){
        this.working = false;
        this.pause = false;
      }else if(this.$store.state.status == 'WORKING'){
        this.working = true;
        this.pause = false;
      }else{
        this.working = false;
        this.pause = true;
      }
    },
    Warehouse () {
      return this.$store.state.warehouse
    }
  },
  watch: {
    changeStatus () {
      this.changeRen();
    },
    changeWarehouse () {
      this.Warehouse();
    }
  },
  props: ["title", "isGoBack", "isRightClick", "rightLink", "backHome"],
  mounted () {
    if(this.isGoBack == 'false'){
      this.isBack = false;
    }else if(this.isGoBack == 'true'){
      this.isBack = true;
    }
    if(this.isRightClick == 'false'){
      this.isRight = false;
    }else if(this.isRightClick == 'true'){
      this.isRight = true;
    }
    this.name = this.$store.state.name;
    this.status = this.$store.state.status;
    this.changeRen();
  },
  computed: {
    // 计算属性的 getter
    changeStatus: function () {
      return this.$store.state.status;
    },
    changeWarehouse: function() {
      return this.$store.state.warehouse;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header{
  height: 45px;
  line-height: 45px;
  font-size: 20px;
  background: linear-gradient(#2196f3, #1A84CC);
  color: #fff;
  font-weight: 600;
  position: relative;
  text-align: center;
}
.iconfont.icon-icon-{
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 10px;
}
.userinfo{
  font-size: 1em;
  position: absolute;
  right: 5px;
  top: 0;
  font-weight: normal;
}
.icon-ren{
  font-size: 1em;
  font-weight: normal;
  margin-left: 0px;
}
.icon-ren.free{color: aqua;}
.icon-ren.working{color: orangered;}
.icon-ren.pause{color: yellow;}
.iconfont.name{
  font-size: .65em;
}
span.warehouse{
  position: absolute;
  left: 40px;
  font-size: 12px;
  font-weight: normal;
}
</style>
